<template>
  <div>
    <a-card
      :bordered="false"
      :body-style="{ padding: '0 12px' }"
      :header-style="{ padding: '0 12px' }"
    >
      <template #title> {{ t["商品素材"] }} </template>
      <TableHead />
      <a-table
        v-model:selectedKeys="goodsData.selectedKeys"
        table-layout-fixed
        :data="goodsData.data"
        :loading="loading"
        :columns="translateColumns(columns)"
        :bordered="false"
        row-key="goodsId"
        :pagination="{
          pageSize: goodsQuery.pageSize,
          total: goodsQuery.total,
          current: goodsQuery.pageNum,
          showJumper: true,
          showPageSize: true,
          showTotal: true
        }"
        :row-selection="{
          selectedRowKeys: goodsKeys
        }"
        @cell-click="cellClick"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <template #video="{ record }">
          <div class="flex gap-3 justify-center h-full items-center">
            <video
              v-if="record.goodsVideo"
              width="90"
              class="flex-1"
              height="120"
              controls
              controlslist="nodownload"
              :src="record.goodsVideo"
            ></video>
            <div class="create-button" @click="setVideo">
              <icon-plus />
            </div>
          </div>
        </template>

        <template #goodsPhoto="{ record }">
          <div class="flex justify-center items-center gc-2">
            <a-image v-if="record.goodsPhoto" height="60" :src="record.goodsPhoto"></a-image>
            <div class="create-button" @click="setImage">
              <icon-plus />
            </div>
          </div>
        </template>

        <template #operation="{ record }">
          <a-button @click="delResource(record)"> {{ t["删除"] }} </a-button>
        </template>
      </a-table>
    </a-card>

    <FileSelector v-model:visible="selector.show" :type="selector.type" :max="1" @change="setSrc" />
  </div>
</template>

<script setup lang="ts">
import { removeUrl, updateGoods } from "@/api/service/goods/goods";
import { Goods } from "@/api/service/goods/types";
import { Library } from "@/api/service/library/types";

import FileSelector from "@/views/admin/components/file-selector/FileSelector.vue";
import { Message } from "@arco-design/web-vue";
import { useEventBus } from "@vueuse/core";

import columns from "../data/columns";
import { cellClick, goodsData, goodsKeys, goodsQuery, loadGoods, loading } from "../data/data";
import TableHead from "./head/ResourceHead.vue";

const bus = useEventBus("resourceBus");
const t = translate("公共模块");
onMounted(async () => {
  await loadGoods();
});

const selector = ref({
  type: "1" as any,
  show: false,
  key: "goodsPhoto" // videoPhoto
});

const setSrc = async (library: Library[]) => {
  const src = library[0].uri;
  if (src && goodsData.value.current) {
    (goodsData.value.current as any)[selector.value.key] = src;
    const data = await updateGoods(goodsData.value.current);
    if (data.code === 200) {
      Message.success(data.msg);
    }
  }
};

const delResource = async (record: Goods) => {
  record.goodsPhoto = "";
  record.goodsVideo = "";
  await removeUrl(record.goodsId);
  loadGoods();
};

const setVideo = async () => {
  selector.value.type = "1";
  selector.value.show = true;
  selector.value.key = "goodsVideo";
};
const setImage = async () => {
  selector.value.type = "0";
  selector.value.show = true;
  selector.value.key = "goodsPhoto";
};

const pageChange = (index: number) => {
  goodsQuery.value.pageNum = index;
  loadGoods();
};

const pageSizeChange = (size: number) => {
  goodsQuery.value.pageSize = size;
  loadGoods();
};

bus.on(() => {
  loadGoods();
});
</script>

<style lang="scss" scoped>
.table-container {
  height: 100%;
  background-color: white;
  padding: 12px;

  ::v-deep(.arco-card-header) {
    border: none;
  }
}

.create-button {
  display: flex;
  align-items: center;
  border: 1px dashed #ddd;
  justify-content: center;
  height: 60px;
  width: 60px;
  cursor: pointer;
}
</style>
../data/data ../data/columns
